<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>wcandhy.xin A New World For You</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/css/style.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"/>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'/>
</head> 
<body>
<div class="cotn_principal">
  <div class="cont_centrar">
    <div class="cont_login">
      <div class="cont_info_log_sign_up">
        <div class="col_md_login">
          <div class="cont_ba_opcitiy">
            <h2>LOGIN</h2>
            <p>Just log in for you .</p>
            <button class="btn_login" onClick="cambiar_login()">LOGIN</button>
          </div>
        </div>
        <div class="col_md_sign_up">
          <div class="cont_ba_opcitiy">
            <h2>SIGN UP</h2>
            <p>Create a new world for you.</p>
            <button class="btn_sign_up" onclick="cambiar_sign_up()">SIGN UP</button>
          </div>
        </div>
      </div>
      <div class="cont_back_info">
        <div class="cont_img_back_grey"> <img src="/img/po.jpg" alt="" /> </div>
      </div>
   	 <div class="cont_forms" >
       <div class="cont_img_back_"> <img src="/img/po.jpg" alt="" /> </div>
       <form th:action="@{/login}" id="login_form">
	       <div class="cont_form_login"> <a href="#" onclick="ocultar_login_sign_up()" ><i class="material-icons">&#xE5C4;</i></a>
	         <h2>LOGIN</h2>
	         <input type="text" placeholder="Email" id="logemail" name="logemail"/>
	         <input type="password" placeholder="Password" id="logpwd" name="logpwd" />
	         <button class="btn_login" type="submit" onclick="logIn()">LOGIN</button>
	       </div>
       </form>
       <form th:action="@{/signup}" id="signup_form">
	       <div class="cont_form_sign_up"> <a href="#" onclick="ocultar_login_sign_up()"><i class="material-icons">&#xE5C4;</i></a>
	         <h2>SIGN UP</h2>
	         <input type="text" placeholder="Email" id="signemail" name="signemail"/>
	         <input type="text" placeholder="User" id="signuser" name="signuser" />
	         <input type="password" placeholder="Password" id="signpwd" name="signpwd" />
	         <input type="password" placeholder="Confirm Password" id="signrepwd" name="signrepwd" />
	         <button class="btn_sign_up" type="submit" onclick="signUp()">SIGN UP</button>
	       </div>
       </form>
     </div>
    </div>
  </div>
</div>

<script th:src="@{/js/index.js}"></script>
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layui/lay/modules/layer.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
	$(function(){
	})
	
	function logIn(){
		$("#login_form").validate({
			rules:{
				logemail:{
					required:true,
					email:true
				},
				logpwd:{
					required:true,
					minlength:6
				}
			},
			onfocusout:false,
			showErrors:function(errorMap,errorList){
				$.each(errorList,function(i,v){
					layer.tips(v.message,v.element,{time:2000,tips:[4,'#ec9999']});
					$(v.element).css("border","1px solid #f38f8fe6");
					return false;
				})
			},
			submitHandler:function(){
				$.ajax({
					type:"get",
					url:$("#login_form").prop("action"),
					data:{
						usremail:$("#logemail").val(),
						password:$("#logpwd").val(),
					},
					success:function(data){
						if(data=='00000'){
							layer.msg("登录成功，欢迎回来！");
							setTimeout(function(){
								location.href="/main";
							},1500);
						}else {
							layer.msg("登录失败：邮箱或密码错误！");
						}
					},
					error:function(err){
						layer.msg("登陆失败："+err.status);
					}
				});
			}
		});
	}
	
	function signUp(){
		$("#signup_form").validate({
			rules:{
				signemail:{
					required:true,
					email:true
				},
				signuser:{
					required:true,
					minlength:2
				},
				signpwd:{
					required:true,
					minlength:6
				},
				signrepwd:{
					required:true,
					minlength:6,
					equalTo:"#signpwd"
				}
			},
			onfocusout:false,
			showErrors:function(errorMap,errorList){
				$.each(errorList,function(i,v){
					layer.tips(v.message,v.element,{time:2000,tips:[2,'#ec9999']});
					$(v.element).css("border","1px solid #f38f8fe6");
					return false;
				})
			},
			submitHandler:function(){
				$.ajax({
					type:"get",
					url:$("#signup_form").prop("action"),
					data:{
						usremail:$("#signemail").val(),
						usrname:$("#signuser").val(),
						password:$("#signpwd").val(),
					},
					success:function(data){
						if(data=='00000'){
							layer.msg("注册成功！");
							setTimeout(function(){
								location.reload();
							},1200);
						}else{
							layer.msg("注册失败！");
						}
					},
					error:function(err){
						layer.msg("登陆失败："+err.status);
					}
				});
			}
		});
	}

</script>

</body>
</html>

